<include file="public@header" />
</head>
<body>
    <div class="wrap">
        <ul class="nav nav-tabs">
            <li><a href="{:url('cloud/index')}">个人信息</a></li>
            <li class="active"><a href="###">注册账号</a></li>
        </ul>
        <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('cloud/reg')}">
            <div class="row">
                <div class="form-group">
                    <label for="input-name" class="col-sm-2 control-label">手机号</label>
                    <div class="col-md-4 col-sm-10">
                        <input type="text" class="form-control" name="mobile">
                    </div>
                </div>
                <div class="form-group">
                    <label for="input-name" class="col-sm-2 control-label">验证码</label>
                    <div class="col-md-4 col-sm-10">
                        <input type="number" class="form-control" name="code">
                    </div>
                    <button type="button" class="btn btn-default btn-success sendcode">发送验证码</button>
                </div>
                
                <div class="form-group">
                    <label for="input-name" class="col-sm-2 control-label">密码</label>
                    <div class="col-md-4 col-sm-10">
                        <input type="password" class="form-control" name="password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="input-name" class="col-sm-2 control-label">QQ</label>
                    <div class="col-md-4 col-sm-10">
                        <input type="number" class="form-control" name="qq">
                    </div>
                </div>
                <div class="form-group">
                    <label for="input-name" class="col-sm-2 control-label">微信</label>
                    <div class="col-md-4 col-sm-10">
                        <input type="text" class="form-control" name="wx">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="input-service" class="col-sm-2 control-label">选择服务商</label>
                    <div class="col-md-4 col-sm-10 serv">
                        <select class="form-control" name="service">
                            <?php foreach ($service['list'] as $v) { ?>
                            <option value="{$v.code}"> {$v.name}</option>
                            <?php } ?>
                            <?php foreach ($service['rec'] as $v) { ?>
                            <option value="{$v.code}"> {$v.name}-推荐</option>
                            <?php } ?>
                        </select>
                    </div>
                    <?php if (empty($service['list']) || empty($service['rec'])) { ?>
                    <button type="button" class="btn btn-default btn-warning getservice">获取服务商</button>
                    <?php } ?>
                </div>
                

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary js-ajax-submit">注册</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script src="__STATIC__/js/admin.js"></script>
    <!--<script src="__STATIC__/layui/dist/layui.js"></script>-->
    <script type="text/javascript" charset="utf-8">
        let lefttime = 120,
            timeer = null;
    
        $(".sendcode").bind('click',function() {
            let mob = $("input[name='mobile']").val();
            var mobreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
            if (!mob || !mobreg.test(mob)) {
                alert('手机号错误')
                return false;
            }
            
            let text = $('.sendcode').html();
            if (text != '发送验证码') {
                alert('短信已发送，请注意查收')
                return false;
            }
            send(mob);
        })
        function countdown() {
            $(".sendcode").html('重新发送(' + lefttime + ")");
            lefttime--;
            if (lefttime > 0) {
                timeer = setTimeout(countdown, 1000);
            } else {
                clearTimeout(timeer);
                lefttime = 120;
                $(".sendcode").html("发送验证码");
            }
        }
        function send(mob) {
            var url = "{:url('cloud/sms')}";
            $.ajax({
                url: url,
                type: "post",
                data: {
                    'mobile': mob
                },
                dataType: 'JSON',
                success: function (data) {
                    alert(data.msg);
                    if (data.code === 1) {
                        countdown();
                    }
                }
            })
        }
        $(".getservice").bind('click', function() {
            var url = "{:url('cloud/loadService')}";
            $.ajax({
                url: url,
                type: "post",
                data: {},
                dataType: 'JSON',
                success: function (data) {
                    alert(data.msg)
                    if (data.code === 1) {
                        let htmlStr = ``,
                            list = data.list,
                            rec = data.rec;
                        for (var i = 0; i < list.length; i ++) {
                            htmlStr += `<option value="${item.code}">${item.name}</option>`;
                        }
                        for (var i = 0; i < rec.length; i ++) {
                            htmlStr += `<option value="${item.code}">${item.name}-推荐</option>`;
                        }
                        $('.serv').html(htmlStr)
                    }
                }
            })
        })
    </script>
</body>
</html>